// 1：ellipsis，省略号，当超过宽度时，显示省略号：
@mixin ell($width:100%) {
  width: $width;
  display: inline-block;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 2：display:inline-block;IE6,7块级元素对inline-block支持不好，需要触发Layout；内联元素就不需要了。
@mixin dib() {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

// 3：清除浮动
@mixin clearfix {
  &:after {
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    content: ".";
  }
  *zoom: 1;
}

// 4：最小高度，IE6不支持min-height，但是使用height能达到一样的效果
@mixin minHeight($min-height) {
  min-height: $min-height;
  height: auto !important;
  height: $min-height;
}

// 5：使用纯CSS现实三角形，兼容所有浏览器；使用了三个参数，第一个是"方向"，第二个是"大小"，第三个是"颜色"，省得每次都写一大堆代码，非常方便啦；
@mixin arrow($direction, $size, $color) {
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  border-width: $size;
  cursor: pointer;
  @if $direction == top {
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent $color transparent;
    border-top: none;
  } @else if $direction == bottom {
    border-style: solid dashed dashed dashed;
    border-color: $color transparent transparent transparent;
    border-bottom: none;
  } @else if $direction == right {
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent $color;
    border-right: none;
  } @else if $direction == left {
    border-style: dashed solid dashed dashed;
    border-color: transparent $color transparent transparent;
    border-left: none;
  }
}
